<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>过渡和动画</title>
		<style type="text/css">
			div {
				width: 100px;
				height: 80px;
				border: 1px solid #878787;
				background-color: coral;
				margin: 30px auto;
			}
			
			#div2 {
				transition: width 2s ease-in-out 1s, height 2s ease-in-out 1s, transform 2s ease-in-out 1s;
			}
			
			#div2:hover {
				width: 300px;
				height: 240px;
				transform: rotate(720deg);
			}
			
			#div3 {
				animation: myfirst 5s;
			}
			
			@keyframes myfirst {
				from {
					background-color: aqua;
					width: 100px;
					height: 80px;
				}
				to {
					background-color: darkblue;
					width: 200px;
					height: 300px;
				}
			}
			
			@-moz-keyframes myfirst {
				from {
					background-color: aqua;
					width: 100px;
					height: 80px;
				}
				to {
					background-color: darkblue;
					width: 200px;
					height: 300px;
				}
			}
			
			@-ms-keyframes myfirst {
				from {
					background-color: aqua;
					width: 100px;
					height: 80px;
				}
				to {
					background-color: darkblue;
					width: 200px;
					height: 300px;
				}
			}
			
			@-webkit-keyframes myfirst {
				from {
					background-color: aqua;
					width: 100px;
					height: 80px;
				}
				to {
					background-color: darkblue;
					width: 200px;
					height: 300px;
				}
			}
			/*keyframe的名字    动画的演示时间     动画的速度    延迟      无限次       是否循环交替反向播放动画。*/
			#div4 {
				animation: myfirst1 5s linear 2s infinite alternate;
				/* Safari 与 Chrome: */
				-webkit-animation: myfirst1 5s linear 2s infinite alternate;
			}
			@-moz-keyframes myfirst1{
				0%{background-color: darkseagreen;}
				25%{background-color: blueviolet;}
				50%{background-color: dodgerblue;}
				75%{background-color: blanchedalmond;}
				100%{background-color: gold;}
			}
			@-ms-keyframes myfirst1{
				0%{background-color: darkseagreen;}
				25%{background-color: blueviolet;}
				50%{background-color: dodgerblue;}
				75%{background-color: blanchedalmond;}
				100%{background-color: gold;}
			}
			@-webkit-keyframes myfirst1{
				0%{background-color: darkseagreen;}
				25%{background-color: blueviolet;}
				50%{background-color: dodgerblue;}
				75%{background-color: blanchedalmond;}
				100%{background-color: gold;}
			}
			@keyframes myfirst1{
				0%{background-color: darkseagreen;}
				25%{background-color: blueviolet;}
				50%{background-color: dodgerblue;}
				75%{background-color: blanchedalmond;}
				100%{background-color: gold;}
			}
		</style>
	</head>

	<body>
		<div id="div1">
			这是一个div.用来对比.
		</div>
		<div id="div2">
			这是一个div.用来显示过渡.
		</div>
		<div id="div3">
			这是一个div.用来显示动画.
		</div>
		<div id="div4">
			规定了六种属性值的动画显示
		</div>
	</body>

</html>